<template>
	<view class="conversion">
		<!-- <view class="top headline">
			<uni-icons type="arrowleft" size="24" class="left" color="#999" @click="commonality.back()" />
			积分兑换
			<text class="msg" @click="rule">规则</text>
		</view> -->
		<uni-nav-bar left-icon="arrowleft" right-text="规则" title="积分兑换" @clickLeft="back"  @clickRight="rule" :fixed="true" status-bar></uni-nav-bar>
		
		
		
		<view class="main">
			<view class="menu">
				<view class="integral" @click="go_url('/pages/shop/integral/myjifen')">
					<image src="/static/img/integral1.png" mode="widthFix" />
					<p>积分 {{point}}</p>
				</view>
				<view class="record" @click="go_url('/pages/shop/integral/jilu')">
					<image src="/static/img/record1.png" mode="widthFix" />
					<p>兑换记录</p>
				</view>
				<view class="site" @click="go_url('/pages/shop/my/address')">
					<image src="/static/img/site1.png" mode="widthFix" />
					<p>收货地址</p>
				</view>
			</view>
			<view class="list">
				<view class="shop" v-for="item in list" :key="item.id" @click="detail(item)">
					<view class="img"><image :src="item.image" /></view>
					<view class="msg">
						<p class="name">{{item.goodsName}}</p>
						<p class="price">市价：{{item.price}}</p>
						<p class="integral">
							{{item.pointAmount}}<text>积分</text>
						</p>
					</view>
				</view>			
			</view>
			<view class="pagination" v-if="pagination">
				<view class="left" :class="{ forbid: paging.page == 1 }" @click="prev">
					<uni-icons type="arrowleft" size="20" color="#fff" class="icons" />
					上一页
				</view>
				<view class="center">{{ paging.page }}/{{ paging.total }}</view>
				<view class="right" :class="{ forbid: paging.page == paging.total }" @click="next">
					下一页
					<uni-icons type="arrowright" size="20" color="#fff" class="icons" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { uniIcons ,uniNavBar} from '@dcloudio/uni-ui';
import integral from '../../../servers/integral/integral.js';
export default {
	components: { uniIcons,uniNavBar },
	data() {
		return {
			list:[],
			point:'',
			pagination:true,
			paging: {
				page: 1,
				total: 100
			},
		};
	},
	mounted(){
		this.initData();
	},
	onLoad(option) {
		this.point=option.integral;
	},
	methods: {
		initData(){
			var obj={
				currentPage: this.paging.page,
				pageSize: 10
			}
			integral.index(obj)
				.then(res => {
					if(res.code==200){
						if(res.data.records.length>0){
							this.paging.total = Math.ceil(res.data.total / res.data.size);
							this.list = res.data.records.map(v => {
								
								v.image = this.imgCDNUrl + v.goodsImg.split(',')[0]
								
								return v;
							});
							this.pagination=true
						}else{
							this.pagination=false
						}
						
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					
				})
				.catch(err => {
					
					console.log(new Error('请检查网络后重试'));
				});
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		go_url(url) {
			uni.navigateTo({
				url: url
			});
		},
		rule(){
			uni.navigateTo({
				url:'../h5?code=POINT_RULE'
			})
		},
		detail(item){
	
			uni.navigateTo({
				url:'./detail?detail='+JSON.stringify(item)+'&point='+this.point
			})
		},
		next() {
			if (this.paging.page < this.paging.total) {
				this.paging.page += 1;
				this.initData();
			}
		},
		prev() {
			if (this.paging.page > 1) {
				this.paging.page -= 1;
				this.initData();
			}
		}
	
	}
};
</script>
<style lang="less" scoped>
.conversion {
	height: 100%;
	background: #fff;
	.top {
		padding-top: var(--status-bar-height);
		
		.msg {
			position: absolute;
			right: 0;
			padding: 0 20rpx;
			font-size: 30rpx;
		}
	}
	.main {
		padding: 0 20rpx;
		box-sizing: border-box;
		overflow: auto;
		.menu {
			overflow: hidden;
			padding: 47rpx 0rpx;
			text-align: center;
			border-bottom: 1rpx solid #e1e1e1; /*no*/
			display: flex;
			justify-content: space-between;
			view {
				float: left;
				width: 193rpx;
				height: 181rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;		
				border-radius: 10rpx;
				color: #fff;
				image {
					width: 64rpx;
					height: 54rpx;
					margin-bottom: 10rpx;
				}
			}
			.integral {
				margin-left: 0;
				background: #fc8e73;
			}
			.record {
				background: #f26494;
			}
			.site {
				background: #fab501;
			}
		}
		.list {
			padding: 0rpx 0 50rpx;
			overflow: hidden;

			.shop {
				width: 47%;
				float: left;
				overflow: hidden;
				margin-top: 50rpx;
				.img {
					image {
						border-radius: 10rpx;
						width: 100%;
						height: 240rpx;
						
					}
				}
				.msg {
					.name {
						height: 69rpx;
						font-size: 28rpx;
						margin-top: 33rpx;
						line-height: 40rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
					.price {
						font-size: 28rpx;
						color: #999999;
						text-decoration: line-through;
					}
					.integral {
						color: #bd3c8c;
						font-size: 34rpx;
						margin-top: 20rpx;
						text {
							font-size: 28rpx;
						}
					}
				}
			}
			.shop:nth-child(2n) {
				margin-left: 6%;
			}
		}
	}
}
</style>
